React use Hook Feilhåndtering: Mestre feilkjedet ved lasting av ressurser

Moderne React-applikasjoner er ofte avhengige av å hente data fra forskjellige kilder – API-er, databaser eller til og med lokal lagring. Når disse operasjonene for lasting av ressurser mislykkes, er det avgjørende å håndtere feilene på en elegant måte og gi brukeren en meningsfull opplevelse. Denne artikkelen utforsker hvordan du effektivt kan administrere og formidle feil i React-applikasjoner ved hjelp av egendefinerte hooks, feilgrenser og en robust strategi for feilhåndtering.

Forstå utfordringen med feilutbredelse

I et typisk React-komponenttre kan feil oppstå på forskjellige nivåer. En komponent som henter data kan støte på en nettverksfeil, en parseringsfeil eller en valideringsfeil. Ideelt sett bør disse feilene fanges opp og håndteres på riktig måte, men det er ofte utilstrekkelig å bare logge feilen i komponenten der den oppstår. Vi trenger en mekanisme for å:

• Rapportere feilen til et sentralt sted: Dette muliggjør logging, analyser og potensielle forsøk på nytt.
• Vise en brukervennlig feilmelding: I stedet for et ødelagt brukergrensesnitt, informer brukeren om problemet og foreslå mulige løsninger.
• Forhindre kaskadefeil: En feil i en komponent bør ikke krasje hele applikasjonen.

Det er her feilutbredelse kommer inn i bildet. Feilutbredelse innebærer å sende feilen oppover i komponenttreet til den når en passende feilhåndteringsgrense. Reacts feilgrenser er designet for å fange opp feil som oppstår under gjengivelse, livssyklusmetoder og konstruktører av barnekomponentene deres, men de håndterer ikke iboende feil som kastes i asynkrone operasjoner som de som utløses av useEffect. Det er her egendefinerte hooks kan bygge bro over gapet.

Utnytte egendefinerte hooks for feilhåndtering

Egendefinerte hooks lar oss kapsle inn gjenbrukbar logikk, inkludert feilhåndtering, i en enkelt, komponerbar enhet. La oss lage en egendefinert hook, useFetch, som håndterer datahenting og feilhåndtering.

Eksempel: En grunnleggende useFetch Hook

Her er en forenklet versjon av useFetch hook:

            
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

            

              
                Copy
              
            
          

Denne hook henter data fra en gitt URL og administrerer lastetilstanden og potensielle feil. Tilstandsvariabelen error inneholder enhver feil som oppstår under hentingsprosessen.

Videreformidle feilen oppover

La oss nå forbedre denne hook for å formidle feilen oppover ved hjelp av en kontekst. Dette lar overordnede komponenter bli varslet om feil som skjer i useFetch hook.

1. Opprett en feilkontekst

Først oppretter vi en React-kontekst for å inneholde feilhåndteringsfunksjonen:

            
import { createContext, useContext } from 'react';

const ErrorContext = createContext(null);

export const ErrorProvider = ErrorContext.Provider;

export const useError = () => useContext(ErrorContext);

            

              
                Copy
              
            
          

2. Endre useFetch Hook

Nå endrer vi useFetch hook for å bruke feilkonteksten:

            
import { useState, useEffect } from 'react';
import { useError } from './ErrorContext';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [localError, setLocalError] = useState(null); // Local error state
  const handleError = useError(); // Get the error handler from context

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLocalError(null);
      } catch (e) {
        setLocalError(e);
        if (handleError) {
          handleError(e); // Propagate the error to the context
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url, handleError]);

  // Return both data and local error. Component can decide which to display.
  return { data, loading, localError };
}

export default useFetch;

            

              
                Copy
              
            
          

Legg merke til at vi nå har to feiltilstander: localError, administrert inne i hook, og feilen som formidles gjennom konteksten. Vi bruker localError internt, men den kan også nås for håndtering på komponentnivå.

3. Omslutt applikasjonen med ErrorProvider

I applikasjonens rot, omslutt komponentene som bruker useFetch med ErrorProvider. Dette gir feilhåndteringskonteksten til alle barnekomponenter:

            
import React, { useState } from 'react';
import { ErrorProvider } from './ErrorContext';
import MyComponent from './MyComponent';

function App() {
  const [globalError, setGlobalError] = useState(null);

  const handleError = (error) => {
    console.error("Error caught at the top level:", error);
    setGlobalError(error);
  };

  return (
    
      {globalError ? (
        
Error: {globalError.message}
      ) : (
        
      )}
    
  );
}

export default App;

            

              
                Copy
              
            
          

4. Bruke useFetch Hook i en komponent

            
import React from 'react';
import useFetch from './useFetch';

function MyComponent() {
  const { data, loading, localError } = useFetch('https://api.example.com/data');

  if (loading) {
    return 
Loading...
;
  }

  if (localError) {
    return 
Error loading data: {localError.message}
;
  }

  return (
    

      
Data:
      
{JSON.stringify(data, null, 2)}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Forklaring

• Feilkontekst: ErrorContext gir en måte å dele feilhåndteringsfunksjonen (handleError) på tvers av komponenter.
• Feilutbredelse: Når en feil oppstår i useFetch, kalles funksjonen handleError, og feilen forplantes opp til App komponenten.
• Sentralisert feilhåndtering: App komponenten kan nå håndtere feilen på en sentralisert måte, logge den, vise en feilmelding eller utføre andre passende handlinger.

Feilgrenser: Et sikkerhetsnett for uventede feil

Mens egendefinerte hooks og kontekst gir en måte å håndtere feil fra asynkrone operasjoner, er feilgrenser essensielle for å fange uventede feil som kan oppstå under gjengivelse. Feilgrenser er React-komponenter som fanger opp JavaScript-feil hvor som helst i deres underordnede komponenttre, logger disse feilene og viser et fallback-brukergrensesnitt i stedet for komponenttreet som krasjet. De fanger opp feil under gjengivelse, i livssyklusmetoder og i konstruktører i hele treet nedenfor dem.

Opprette en feilgrensekomponent

            
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error in ErrorBoundary:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        

          
Something went wrong.
          

            {this.state.error && this.state.error.toString()}\n			

            {this.state.errorInfo && this.state.errorInfo.componentStack}
          
        
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Bruke feilgrensen

Omslutt enhver komponent som potensielt kan kaste en feil med ErrorBoundary komponenten:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    

      
        
      
    
  );
}

export default App;

            

              
                Copy
              
            
          

Kombinere feilgrenser og egendefinerte hooks

For den mest robuste feilhåndteringen, kombiner feilgrenser med egendefinerte hooks som useFetch. Feilgrenser fanger opp uventede gjengivelsesfeil, mens egendefinerte hooks administrerer feil fra asynkrone operasjoner og forplanter dem oppover. ErrorProvider og ErrorBoundary kan eksistere sammen; ErrorProvider tillater granulær feilhåndtering og rapportering, mens ErrorBoundary forhindrer katastrofale applikasjonskrasj.

Beste fremgangsmåter for feilhåndtering i React

• Sentralisert feillogging: Send feil til en sentral loggetjeneste for overvåking og analyse. Tjenester som Sentry, Rollbar og Bugsnag er gode alternativer. Vurder å bruke et loggnivå (f.eks. console.error, console.warn, console.info) for å differensiere alvorlighetsgraden av hendelser.
• Brukervennlige feilmeldinger: Vis tydelige og nyttige feilmeldinger til brukeren. Unngå teknisk sjargong og gi forslag til hvordan du kan løse problemet. Tenk på lokalisering: sørg for at feilmeldinger er forståelige for brukere i forskjellige språk og kulturelle kontekster.
• Elegant nedbrytning: Design applikasjonen din for å bryte ned elegant i tilfelle en feil. For eksempel, hvis et bestemt API-kall mislykkes, skjul den tilsvarende komponenten eller vis en plassholder i stedet for å krasje hele applikasjonen.
• Forsøk igjen mekanismer: Implementer mekanismer for å prøve igjen for forbigående feil, for eksempel nettverksfeil. Vær imidlertid forsiktig med å unngå uendelige sløyfer for nye forsøk, noe som kan forverre problemet. Eksponentiell tilbakegang er en god strategi.
• Testing: Test feilhåndteringslogikken grundig for å sikre at den fungerer som forventet. Simuler forskjellige feilscenarier, for eksempel nettverksfeil, ugyldige data og serverfeil. Vurder å bruke verktøy som Jest og React Testing Library for å skrive enhets- og integrasjonstester.
• Overvåking: Overvåk applikasjonen din kontinuerlig for feil og ytelsesproblemer. Sett opp varsler for å bli varslet når feil oppstår, slik at du raskt kan svare på problemer.
• Vurder sikkerhet: Unngå at sensitiv informasjon vises i feilmeldinger. Unngå å inkludere stakksporinger eller interne serverdetaljer i brukervendte meldinger, da denne informasjonen kan utnyttes av ondsinnede aktører.

Avanserte feilhåndteringsteknikker

Bruke en global løsning for tilstandshåndtering av feil

For mer komplekse applikasjoner, vurder å bruke en global løsning for tilstandshåndtering som Redux, Zustand eller Recoil for å administrere feiltilstanden. Dette lar deg få tilgang til og oppdatere feiltilstanden fra hvor som helst i applikasjonen din, og gir en sentralisert måte å håndtere feil på. For eksempel kan du sende en handling for å oppdatere feiltilstanden når en feil oppstår, og deretter bruke en velger for å hente feiltilstanden i hvilken som helst komponent.

Implementere egendefinerte feilklasser

Opprett egendefinerte feilklasser for å representere forskjellige typer feil som kan oppstå i applikasjonen din. Dette lar deg enkelt skille mellom forskjellige typer feil og håndtere dem deretter. For eksempel kan du opprette en NetworkError klasse, en ValidationError klasse og en ServerError klasse. Dette vil gjøre feilhåndteringslogikken mer organisert og vedlikeholdbar.

Bruke et kretsbrytermønster

Kretsbrytermønsteret er et designmønster som kan bidra til å forhindre kaskadefeil i distribuerte systemer. Den grunnleggende ideen er å omslutte kall til eksterne tjenester i et kretsbryterobjekt. Hvis kretsbryteren oppdager et visst antall feil, "åpner" den kretsen og forhindrer ytterligere kall til den eksterne tjenesten. Etter en viss tid "halvåpner" kretsbryteren kretsen og tillater et enkelt kall til den eksterne tjenesten. Hvis samtalen lykkes, "lukker" kretsbryteren kretsen og tillater at alle kall til den eksterne tjenesten gjenopptas. Dette kan bidra til å forhindre at applikasjonen din blir overveldet av feil i eksterne tjenester.

Internasjonalisering (i18n) hensyn

Når du arbeider med et globalt publikum, er internasjonalisering avgjørende. Feilmeldinger skal oversettes til brukerens foretrukne språk. Vurder å bruke et bibliotek som i18next for å administrere oversettelser effektivt. Vær dessuten oppmerksom på kulturelle forskjeller i hvordan feil oppfattes. For eksempel kan en enkel advarsel tolkes forskjellig i forskjellige kulturer, så sørg for at tonen og formuleringen er passende for målgruppen din.

Vanlige feilscenarier og løsninger

Nettverksfeil

Scenario: API-serveren er utilgjengelig, eller brukerens internettforbindelse er nede.

Løsning: Vis en melding som indikerer at det er et nettverksproblem og foreslår å sjekke internettforbindelsen. Implementer en mekanisme for å prøve igjen med eksponentiell tilbakegang.

Ugyldige data

Scenario: API-en returnerer data som ikke samsvarer med det forventede skjemaet.

Løsning: Implementer datavalidering på klientsiden for å fange opp ugyldige data. Vis en feilmelding som indikerer at dataene er skadet eller ugyldige. Vurder å bruke TypeScript for å håndheve datatyper ved kompileringstidspunktet.

Autentiseringsfeil

Scenario: Brukerens autentiseringstoken er ugyldig eller utløpt.

Løsning: Omdiriger brukeren til påloggingssiden. Vis en melding som indikerer at økten deres er utløpt og at de må logge på igjen.

Autorisasjonsfeil

Scenario: Brukeren har ikke tillatelse til å få tilgang til en bestemt ressurs.

Løsning: Vis en melding som indikerer at de ikke har de nødvendige tillatelsene. Gi en lenke for å kontakte support hvis de mener de bør ha tilgang.

Serverfeil

Scenario: API-serveren støter på en uventet feil.

Løsning: Vis en generell feilmelding som indikerer at det er et problem med serveren. Logg feilen på serversiden for feilsøkingsformål. Vurder å bruke en tjeneste som Sentry eller Rollbar for å spore serverfeil.

Konklusjon

Effektiv feilhåndtering er avgjørende for å skape robuste og brukervennlige React-applikasjoner. Ved å kombinere egendefinerte hooks, feilgrenser og en omfattende feilhåndteringsstrategi, kan du sikre at applikasjonen din håndterer feil på en elegant måte og gir en meningsfull opplevelse for brukeren, selv under feil ved lasting av ressurser. Husk å prioritere sentralisert feillogging, brukervennlige feilmeldinger og elegant nedbrytning. Ved å følge disse beste fremgangsmåtene kan du bygge React-applikasjoner som er motstandsdyktige, pålitelige og enkle å vedlikeholde, uavhengig av brukernes plassering eller bakgrunn.